<template>
  <a-drawer width="40%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules" v-if="stepIndex < 0">
      <a-form-model-item label="数据库表名" prop="tableName">
        <a-input v-model="form.tableName" placeholder="请输入表名，请使用下划线方式命名。例如：sys_user" />
      </a-form-model-item>
      <a-form-model-item label="描述" prop="tableLabel">
        <a-input v-model="form.tableLabel" placeholder="请输入表描述, 简短说明。例如: 系统用户" />
      </a-form-model-item>
      <a-form-model-item label="数据结构" prop="dataType">
        <a-select v-model="form.dataType" style="width: 120px">
          <a-select-option value="normal">
            单表
          </a-select-option>
          <a-select-option value="tree">
            树表
          </a-select-option>
          <a-select-option value="cascade">
            主子表
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <!-- 新增时显示进度 -->
    <a-steps :current="stepIndex" :status="stepStatus" labelPlacement="vertical" v-else>
      <a-step title="生成数据库表" :description="form.tableName ? '表名 '+form.tableName : ''">
        <a-icon v-if="stepIndex === 0 && stepStatus === 'process'" slot="icon" type="loading" />
      </a-step>
      <a-step title="生成接口" description="创建增删改查接口" >
        <a-icon v-if="stepIndex === 1 && stepStatus === 'process'" slot="icon" type="loading" />
      </a-step>
      <a-step title="生成菜单" description="在根目录下创建基础菜单" >
        <a-icon v-if="stepIndex === 2 && stepStatus === 'process'" slot="icon" type="loading" />
      </a-step>
    </a-steps>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" @click="submitForm">
          保存
        </a-button>
        <a-button type="dashed" @click="cancel">
          取消
        </a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>

import { addTable, updateTable, genTable, genCrud, genMenu } from '@/api/free/table'

export default {
  name: 'CreateForm',
  components: {
  },
  data () {
    return {
      loading: false,
      stepIndex: -1,
      stepStatus: 'error',
      menuExpandedKeys: [],
      autoExpandParent: false,
      menuCheckedKeys: [],
      halfCheckedKeys: [],
      menuOptions: [],
      formTitle: '',
      // 表单参数
      form: {
        tableName: undefined,
        tableLabel: undefined,
        oldId: undefined,
        dataType: 'normal'
      },
      open: false,
      menuExpand: false,
      menuNodeAll: false,
      rules: {
        tableName: [{ required: true, message: '表名不能为空', trigger: 'blur' }],
        tableLabel: [{ required: true, message: '表描述不能为空', trigger: 'blur' }]
      },
      defaultProps: {
        children: 'children',
        title: 'label',
        key: 'id'
      }
    }
  },
  filters: {
  },
  created () {
  },

  watch: {
    stepIndex (val) {
      switch (val) {
        case 0:
          genTable(this.form).then(res => this.stepIndex++).catch(e => {
            this.stepStatus = 'error'
          })
          break
        case 1:
          genCrud(this.form).then(res => this.stepIndex++).catch(e => {
            this.stepStatus = 'error'
          })
          break
        case 2:
          genMenu(this.form).then(res => {
            this.$emit('ok')
            this.stepStatus = 'finish'
            setTimeout(() => {
              this.reset()
              this.open = false
            }, 3000)
          }).catch(e => {
            console.log(e)
            this.stepStatus = 'error'
          })
          break
        default:
          console.log('当前步骤', val)
      }
    }
  },
  methods: {
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        tableName: undefined,
        tableLabel: undefined,
        oldId: undefined,
        dataType: 'normal'
      }
      this.stepIndex = -1
    },
     /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.open = true
      this.formTitle = '增加数据库表'
    },
    /** 修改按钮操作 */
    handleUpdate (record) {
      this.reset()
      this.open = true
      this.formTitle = '修改数据库表'
      this.form = record
      this.form.oldId = record.tableName
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.formTitle.includes('修改')) {
            updateTable(this.form).then(res => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.$emit('ok')
            })
          } else {
            addTable(this.form).then(res => {
              this.stepIndex = 0
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
